<template>
  <div class="wantBuySearch-com">
    <view class="wantBuySearch-warp">
      <view class="search-warp">
        <u-search
          :placeholder="$t('locales.purchaseSearch')"
          v-model="keywords"
          :show-action="false"
          @search="searchInput"
        />
      </view>
      <view class="search-select">
        <view class="search-select__warp">
          <u-row>
            <u-col span="4">
              <view
                class="search-select__warp-item"
                @click="onSelectItemClick(0)"
              >
                <text class="title u-line-1">{{$t('locales.releaseStatus')}}</text>
                <view :class="showSelectValue ? 'icon-top' : 'icon-bottom'" />
              </view>
            </u-col>
            <u-col span="4">
              <view
                class="search-select__warp-item"
                @click="onSelectItemClick(1)"
              >
                <text class="title u-line-1">{{$t('locales.releaseTime')}}</text>
                <view>
                  <template v-if="publishTimeSort !== 0">
                    <view
                      :class="
                        publishTimeSort === 1
                          ? 'icon-top icon-top-ictive'
                          : 'icon-top'
                      "
                      style="margin-bottom: 5rpx"
                    />
                    <view
                      :class="
                        publishTimeSort === 2
                          ? 'icon-bottom icon-bottom-ictive'
                          : 'icon-bottom'
                      "
                    />
                  </template>
                  <template v-else>
                    <view class="icon-top" style="margin-bottom: 5rpx" />
                    <view class="icon-bottom" />
                  </template>
                </view>
              </view>
            </u-col>
            <u-col span="4">
              <view
                class="search-select__warp-item"
                @click="onSelectItemClick(2)"
              >
                <text class="title u-line-1">{{$t('locales.purchaseNum')}}</text>
                <view>
                  <template v-if="requireNumberSort !== 0">
                    <view
                      :class="
                        requireNumberSort === 1
                          ? 'icon-top icon-top-ictive'
                          : 'icon-top'
                      "
                      style="margin-bottom: 5rpx"
                    />
                    <view
                      :class="
                        requireNumberSort === 2
                          ? 'icon-bottom icon-bottom-ictive'
                          : 'icon-bottom'
                      "
                    />
                  </template>
                  <template v-else>
                    <view class="icon-top" style="margin-bottom: 5rpx" />
                    <view class="icon-bottom" />
                  </template>
                  <!-- <view
                    :class="
                      requireNumberSort
                        ? 'icon-top icon-top-ictive'
                        : 'icon-top'
                    "
                    style="margin-bottom: 5rpx"
                  />
                  <view
                    :class="
                      requireNumberSort
                        ? 'icon-bottom'
                        : 'icon-bottom icon-bottom-ictive'
                    "
                  /> -->
                </view>
              </view>
            </u-col>
          </u-row>
        </view>
        <view class="search-select__value" v-if="showSelectValue">
          <view
            :class="
              selectValue === 1
                ? 'search-select__value-item search-select__value-item__active'
                : 'search-select__value-item'
            "
            @click="onSelectValueChange(1)"
            >
              <text>{{$t('locales.normal')}}</text>
              <u-icon name="checkbox-mark" size="20" v-if="selectValue === 1"></u-icon>
            </view
          >
          <view
            :class="
              selectValue === 0
                ? 'search-select__value-item search-select__value-item__active'
                : 'search-select__value-item'
            "
            @click="onSelectValueChange(0)"
            >
              <text>{{$t('locales.isClosed')}}</text>
              <u-icon name="checkbox-mark" size="20" v-if="selectValue === 0"></u-icon>
            </view
          >
          <view
            :class="
              selectValue === -1
                ? 'search-select__value-item search-select__value-item__active'
                : 'search-select__value-item'
            "
            @click="onSelectValueChange(-1)"
            >
              <text>{{$t('locales.isClose')}}</text>
              <u-icon name="checkbox-mark" size="20" v-if="selectValue === -1"></u-icon>
            </view
          >
        </view>
      </view>
    </view>
  </div>
</template>
<script>
export default {
  data() {
    return {
      keywords: '',

      showSelectValue: false,
      publishTimeSort: 0,
      requireNumberSort: 0,

      selectValue: 1
    }
  },

  created() {
    this.$emit('change', this.searchVal)
  },

  computed: {
    searchVal() {
      return {
        keyWord: this.keywords,
        purchaseStatus: this.selectValue,
        sortQty: this.requireNumberSort === 0 ? '' : this.requireNumberSort === 1 ? 0 : 1,
        sortTime: this.publishTimeSort === 0 ? '' : this.publishTimeSort === 1 ? 0 : 1,
      }
    }
  },

  methods: {
    onSelectItemClick(index) {
      if (index === 0) {
        this.showSelectValue = !this.showSelectValue
      }
      // 发布时间
      if (index === 1) {
        if (this.publishTimeSort === 2) {
          this.publishTimeSort = 0
        } else {
          this.publishTimeSort += 1
        }
        this.$emit('change', this.searchVal)
      }
      // 求购数
      if (index === 2) {
        if (this.requireNumberSort === 2) {
          this.requireNumberSort = 0
        } else {
          this.requireNumberSort += 1
        }
        this.$emit('change', this.searchVal)
      }
    },
    
    onSelectValueChange(val) {
      this.selectValue = val
      this.showSelectValue = !this.showSelectValue
      this.$emit('change', this.searchVal)
    },

    // 输入框
    searchInput(val) {
      this.$emit('change', this.searchVal)
    }
  }
}
</script>
<style lang="scss" scoped>
// 绘制三角形
@mixin triangle($direction, $size, $borderColor) {
  content: '';
  height: 0;
  width: 0;

  @if $direction == top {
    border-bottom: $size solid $borderColor;
    border-left: $size dashed transparent;
    border-right: $size dashed transparent;
  } @else if $direction == right {
    border-left: $size solid $borderColor;
    border-top: $size dashed transparent;
    border-bottom: $size dashed transparent;
  } @else if $direction == bottom {
    border-top: $size solid $borderColor;
    border-left: $size dashed transparent;
    border-right: $size dashed transparent;
  } @else if $direction == left {
    border-right: $size solid $borderColor;
    border-top: $size dashed transparent;
    border-bottom: $size dashed transparent;
  }
}

.icon-top {
  @include triangle(top, 8rpx, #666666);
}

.icon-bottom {
  @include triangle(bottom, 8rpx, #666666);
}

.icon-top-ictive {
  @include triangle(top, 8rpx, $theme-color);
}

.icon-bottom-ictive {
  @include triangle(bottom, 8rpx, $theme-color);
}

.wantBuySearch-com {
  position: fixed;
  left: 0;
  top: var(--window-top);
  width: 100%;
  z-index: 9;
  .wantBuySearch-warp {
    width: 100%;
    background-color: #fff;
  }
  .search-warp {
    padding: 15rpx 24rpx 0 24rpx;
  }
  .search-select {
    .search-select__warp {
      border-bottom: 1px solid #e3e6ed;
      .search-select__warp-item {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 88rpx;
        font-size: 26rpx;
        font-family: PingFang SC;
        color: #666666;
        .title {
          padding-right: 10rpx;
        }
      }
    }
    .search-select__value {
      padding: 0 30rpx;
      overflow: hidden;
      transition: 0.5s;
      background-color: #fff;
      .search-select__value-item {
        line-height: 87rpx;
        font-size: 26rpx;
        font-family: PingFang SC;
        color: #212121;
        border-bottom: 1px solid #e5e5e5;
        display: flex;
        justify-content: space-between;
      }
      .search-select__value-item:last-child {
        border: none;
      }

      .search-select__value-item__active {
        color: $theme-color;
      }
    }
  }
}
</style>